<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Javascript的this指向</h1>
<hr>
<div>
    <button id="bt1" onclick="handleClick()">点我1</button><br>
    <button id="bt2">点我2</button><br>
</div>
<script>

    //1.当调用成员方法时，this默认指向调用当前方法的那个对象。
    /*
    let p1 = {
        name: '张三',
        age : 18,
        introduce:function(){
            console.log("name is:"+this.name+",age is:"+this.age);
        }
    }

    let p2={
        name: '李四',
        age: 20
    }

    p1.introduce();  //p1.introduce.call(p1);
    p1.introduce.call(p2);
    */

    //2.如果有new关键字，this总是指向new出来的那个新对象
    /*
    let temp;
    function Person(name,age){
        this.name = name;
        this.age = age;
        temp = this;
    }

    let p1 = new Person('张三',18);
    console.log(p1===temp);
    let p2 = new Person('李四',20);
    console.log(p1===temp);
    console.log(p2===temp);
    */

    //3.DOM事件中，如果使用addEventListener方式注册事件监听器，this指向事件源对象

    //通过onclick属性绑定的事件,this指向window
    function handleClick(){
        console.log(this);
    }
    //给按钮动态注册事件监听器
    document.getElementById("bt2").addEventListener("click",function(){
        console.log(this);
    })

    //4.在回调函数中,this默认指向window
    /*
    var age = 100;
    function foo(){
        console.log(this.age);
    }

    let p1 = {
        name: '张三',
        age : 18,

        fn: function(callback){
            callback();
        }
    }
    p1.fn(foo);*/

    //如果想改变回调函数的this指向可以通过call();
    /*
    var age = 100;
    function foo(){
        console.log(this.age);
    }

    let p1 = {
        name: '张三',
        age : 18,

        fn: function(callback){
            callback.call(this);
        }
    }
    p1.fn(foo);
    */

    //5.箭头函数this在函数定义时绑定且不可改变属于静态绑定。
    /*
    var age = 100;

    let p1 = {
        name: '张三',
        age : 18,
        introduce:()=>console.log("name is:"+this.name+",age is:"+this.age)
    }

    p1.introduce();
    */

    //如果不使用箭头函数，this指向调用当前方法的对象。
    var age = 100;

    let p1 = {
        name: '张三',
        age : 18,
        introduce:function(){
            console.log("name is:"+this.name+",age is:"+this.age)
        }
    }

    p1.introduce();

</script>
</body>
</html>